<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en-US"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en-US"> <![endif]-->
<!--[if gte IE 8]><html class="ie ie8" lang="en-US"> <![endif]-->

<html dir="ltr" lang="en-US">

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <!-- Google Fonts
        ============================================= -->
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> 

        <!-- Stylesheets
        ============================================= -->
         <!-- 预约添加,将原来的bootstrap.css,改变引入方式 start-->
        <!-- 原来是 <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" /> -->
        <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" type="text/css" />
		<link href="/datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
        <!--预约添加  end-->
        <link rel="stylesheet" href="css/plugin.css" type="text/css" />
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        <link rel="stylesheet" href="css/responsive.css" type="text/css" />

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
		
		
        
        
      
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />


        <!-- JavaScripts
        ============================================= -->
        <script type="text/javascript" src="js/jquery.js"></script>
		
		 
		
       
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <title>Gapura | Single Property HTML Themes</title>
        <!--预约start  -->
        <style>
			.modal-open{
    					overflow-y: scroll;
				}
			body{
  				  padding-right:0 !important;
			}
        </style>
        <!--预约end  -->
    </head>

    <body>
      
		<!--  modal end-->
		  <!--预约添加  end-->
		  
		  <!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document" style="z-index:2041;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">预约看房</h4>
					</div>
					<div class="modal-body">
						<form  id="saveFormId" action="#" method="post">
							
							<div class="form-group">
								<label for="titleId">联系电话</label>
								<input type="text"
									class="form-control" name="tel" id="telId"
									placeholder="请输入联系电话">
							</div>
							
							<div class="form-group">
								<label for="startTimeId">预约时间（可看房时间09:00-17:00）</label>
								<input type="text"
									class="form-control form_datetime" name="bookTime" id="bookTimeId"
									placeholder="请选择预约时间" autocomplete="off">
							</div>
							
							<div class="form-group">
								<label for="remarkId">经纪人:</label>
								<label for="remarkId" id="managerId">吴先生</label>
								
							</div>
							<div class="form-group">
								<label for="remarkId">联系电话：</label>
								<label for="remarkId" id="managerTelId">18194001005</label>
							</div>
							
						</form>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" onclick="doSaveObject()">保存
						</button>
					</div>
				</div>
			</div>
		</div>
		<!--  modal end-->
		  
		 
		<!-- Modal -->
		<div class="modal fade" id="myModal_error" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
			<div class="modal-dialog" role="document" style="z-index:2042;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">提示</h4>
					</div>
					<div class="modal-body">
						<form  id="saveFormId" action="#" method="post">
							<div class="form-group">
								<label id="errorMessage" for="remarkId"></label>
								
							</div>
							
							
						</form>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn  btn-danger" data-dismiss="modal">确认</button>
						
					</div>
				</div>
			</div>
		</div>
		
		 
		<!-- Modal -->
		<div class="modal fade" id="myModal_success" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
			<div class="modal-dialog" role="document" style="z-index:2042;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">提示</h4>
					</div>
					<div class="modal-body">
						<form  id="saveFormId" action="#" method="post">
							<div class="form-group">
								<label  for="remarkId">预约成功，请在预约时间1小时内到达</label>
								
								
							</div>
							<div class="form-group">
								<label  for="remarkId">如需修改或者查看预约消息，可点击：</label>
								
							</div>
							<div class="form-group">
								<label  for="remarkId" style="color:blue"><a style="color:blue" href="/book">我的预约</a></label>
								
							</div>
							
						</form>

					</div>
					<div class="modal-footer">
						<button  class="btn  btn-success" onclick="myHidden()">确认</button>
						
					</div>
				</div>
			</div>
		</div>
		<!--预约添加  end-->
		 
        <!-- MAIN WRAPPER
        ============================================= -->
        <div id="main-wrapper" class="room-detail-page animsition clearfix">

            <!-- HEADER
            ============================================= -->
            <header id="header" class="site-header transparent-header clearfix">

                <div class="header-navigation">
                    <div class="container">
                        <div class="row">
                            <div class="logo wow fadeInDown col-md-3" data-wow-delay="1s">
                                <div class="logo-image">
                                    <a href="/index"><img src="img/logo.png" alt=""></a>
                                </div>
                            </div>

                            <!-- MOBILE MENU START
                            ============================================= -->
                            <div class="mobile-menu wow fadeInDown" data-wow-delay="1s">
                                <button id="slide-buttons" class="icon icon-navicon-round"></button>
                            </div>

                            <nav id="c-menu--slide-right" class="c-menu c-menu--slide-right">
                                <button class="c-menu__close icon icon-remove-delete"></button>
                                <ul class="menus-mobile">
                                    <li><a href="/index">Home</a></li>
                                    <li><a href="/room-detail">Room Detail</a></li>
                                    <li class="has-child">
                                            <a href="/blog">Blog</a>
                                            <ul class="child">
                                                <li><a href="/single-post">Single Post</a></li>
                                            </ul>
                                        </li>
                                    <li><a href="/contact">Contact Agent</a></li>
                                </ul>
                            </nav>
                            <div id="slide-overlay" class="slide-overlay"></div>
                            <!-- MOBILE MENU END -->

                            <div class="navigation wow fadeInDown col-md-9" data-wow-delay="1s">
                                <nav id="main-menu" class="menu">
                                    <ul id="menu-top-menu" class="menus">
                                        <li><a href="/index">Home</a></li>
                                        <li class="active"><a href="room-detail.html">Room Detail</a></li>
                                        <li class="has-child">
                                            <a href="/blog">Blog</a>
                                            <ul class="child">
                                                <li><a href="/single-post">Single Post</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="/contact">Contact Agent</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <!-- HEADER END -->

            <!-- PAGE TITLE START
            ============================================= -->
            <div class="page-title wow fadeIn clearfix">
                <div class="title text-center wow fadeIn" data-wow-delay="1.5s">
                    <p class="subtitle">A few words about the house</p>
                    <h2><span class="bold">Room</span> Detail</h2>
                </div>
            </div>
            <!-- PAGE TITLE END -->

            <!-- CONTENT START
            ============================================= -->
            <section id="content" class="clearfix">

                <!-- ROOM DETAIL START
                ============================================= -->
                <div class="room-detail-wrap wrapper clearfix">
                    <div class="container">
                        <div class="row">
                        
                            <div class="room-slider col-md-6">
                                <div class="flexslider">
                                    <ul class="slides">
                                        <li>
                                            <img src="img/content/roomdetail/1.jpg" alt="" />
                                        </li>
                                        <li>
                                            <img src="img/content/roomdetail/2.jpg" alt="" />
                                        </li>
                                        <li>
                                            <img src="img/content/roomdetail/3.jpg" alt="" />
                                        </li>
                                    </ul>
                                </div>
                            </div> 

                            <div class="room-detail col-md-6">
                                <h2>Living Room</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor arcu non ligula convallis, vel tincidunt ipsum posuere.sollicitudin. Duis iaculis, arcu ut hendrerit pharetra, elit augue pulvinar magna</p>
                                <ul>
                                    <li><i class="icon icon-check-box"></i>Fully Furnished</li>
                                    <li><i class="icon icon-check-box"></i>Royal Touch paint</li>
                                    <li><i class="icon icon-check-box"></i>Mini Bar</li>
                                    <li><i class="icon icon-check-box"></i>Sea View</li>
                                </ul>
                   				<br>
                   				
             					  <!--预约添加  start-->
                               <a href="contact.html" class="btn btn-primary btn-lg " role="button">Contact Agent</a>
                               <button type="button" class="btn btn-primary btn-lg " data-toggle="modal"
			data-target="#myModal">预约看房</button>
			 					
								<a  class="btn btn-lg btn-primary" href="http://localhost:8101/book">
								我的预约</a>
			  					<!--预约添加  end-->
			  					
                            </div>
                            
                        </div>
                    </div>
                </div>
                <!-- ROOM DETAIL END -->
				
			
		
                <!-- GALLERY START
                ============================================= -->
                <div class="gallery wrapper clearfix">
                    <div class="container">

                        <div class="title text-center wow fadeIn">
                            <h2><span class="bold">Room</span> Gallery</h2>
                        </div>

                        <section id="grid" class="grid clearfix">
                            <a href="room-detail.html" class="wow fadeInUp" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
                                <figure>
                                    <img src="img/content/gallery/image1.jpg" />
                                    <svg viewBox="0 0 180 500" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
                                    <figcaption>
                                        <h2>Living Room</h2>
                                        <span>View</span>
                                    </figcaption>
                                </figure>
                            </a>
                            <a href="room-detail.html" class="wow fadeInUp" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
                                <figure>
                                    <img src="img/content/gallery/image2.jpg" />
                                    <svg viewBox="0 0 180 500" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
                                    <figcaption>
                                        <h2>Dining Room</h2>
                                        <span>View</span>
                                    </figcaption>
                                </figure>
                            </a>
                            <a href="room-detail.html" class="wow fadeInUp" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
                                <figure>
                                    <img src="img/content/gallery/image3.jpg" />
                                    <svg viewBox="0 0 180 500" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
                                    <figcaption>
                                        <h2>Kitchen</h2>
                                        <span>View</span>
                                    </figcaption>
                                </figure>
                            </a>
                            <a href="room-detail.html" class="wow fadeInUp" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
                                <figure>
                                    <img src="img/content/gallery/image4.jpg" />
                                    <svg viewBox="0 0 180 500" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
                                    <figcaption>
                                        <h2>Chat Room</h2>
                                        <span>View</span>
                                    </figcaption>
                                </figure>
                            </a>
                            <a href="room-detail.html" class="wow fadeInUp" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
                                <figure>
                                    <img src="img/content/gallery/image5.jpg" />
                                    <svg viewBox="0 0 180 500" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
                                    <figcaption>
                                        <h2>Master Bedroom</h2>
                                        <span>View</span>
                                    </figcaption>
                                </figure>
                            </a>
                            <a href="room-detail.html" class="wow fadeInUp" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
                                <figure>
                                    <img src="img/content/gallery/image6.jpg" />
                                    <svg viewBox="0 0 180 500" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
                                    <figcaption>
                                        <h2>Bathroom</h2>
                                        <span>View</span>
                                    </figcaption>
                                </figure>
                            </a>
                            <a href="room-detail.html" class="wow fadeInUp" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
                                <figure>
                                    <img src="img/content/gallery/image7.jpg" />
                                    <svg viewBox="0 0 180 500" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
                                    <figcaption>
                                        <h2>Reading Room</h2>
                                        <span>View</span>
                                    </figcaption>
                                </figure>
                            </a>
                            <a href="room-detail.html" class="wow fadeInUp" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
                                <figure>
                                    <img src="img/content/gallery/image8.jpg" />
                                    <svg viewBox="0 0 180 500" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
                                    <figcaption>
                                        <h2>Theatre Room</h2>
                                        <span>View</span>
                                    </figcaption>
                                </figure>
                            </a>
                            <a href="room-detail.html" class="wow fadeInUp" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
                                <figure>
                                    <img src="img/content/gallery/image9.jpg" />
                                    <svg viewBox="0 0 180 500" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
                                    <figcaption>
                                        <h2>Garage</h2>
                                        <span>View</span>
                                    </figcaption>
                                </figure>
                            </a>
                        </section>
                    </div>
                </div>
                <!-- GALLERY END -->

            </section>
            <!-- CONTENT END -->
            
            <!-- FOOTER START
            ============================================= -->
            <footer id="footer" class="wrapper clearfix">
                <div class="footer-text wow fadeIn text-center">
                    <h1>Want More Information?</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
                    <a href="contact.html" class="button-normal yellow">Contact Agent</a>
                </div>

                <div class="footer-copyright wow fadeIn text-center">
                    <div class="container">
                        <div class="copyright">
                            <ul class="footer-social">
                                <li><a href="http://twitter.com"><i class="icon icon-twitter"></i></a></li>
                                <li><a href="http://facebook.com"><i class="icon icon-facebook"></i></a></li>
                                <li><a href="http://googleplus.com"><i class="icon icon-googleplus"></i></a></li>
                                <li><a href="http://skype.com"><i class="icon icon-skype"></i></a></li>
                                <li><a href="http://dribble.com"><i class="icon icon-dribble"></i></a></li>
                            </ul>

                            <p>Copyright 2015 Gapura Single Property. All Right Reserved. By Themes Awesome</p>
                        </div>
                    </div>
                </div>
            </footer>
            <!-- FOOTER END -->

        </div>
        <!-- MAIN WRAPPER END -->
		
			
        <!-- Footer Scripts
        ============================================= -->
        <!-- External -->
        <script type="text/javascript" src="js/plugin.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
          <!--预约添加 start -->
		<script src="/datepicker/js/bootstrap-datetimepicker.min.js"></script>
	<script src="/datepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
         <!--预约添加  end-->
        <script>
      
            (function() {
    
                function init() {
                    var speed = 300,
                        easing = mina.backout;

                    [].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ) {
                        var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
                            pathConfig = {
                                from : path.attr( 'd' ),
                                to : el.getAttribute( 'data-path-hover' )
                            };

                        el.addEventListener( 'mouseenter', function() {
                            path.animate( { 'path' : pathConfig.to }, speed, easing );
                        } );

                        el.addEventListener( 'mouseleave', function() {
                            path.animate( { 'path' : pathConfig.from }, speed, easing );
                        } );
                    } );
                }

                init();

            })();
            //预约添加start
            $(".form_datetime").datetimepicker({
        		language:'zh-CN',
        		startDate:new Date(),
        		format:'yyyy/mm/dd hh:00',
        		minView:1,
        		autoclose:true
        	})
        	
        	 
        	function doSaveObject(){
            	let url="/book/doSave";
            	
            	let tel=$(".form-group #telId").val();
            	let bookTime=$(".form-group #bookTimeId").val();
            	let manager=$(".form-group #managerId").text();
            	let managerTel=$(".form-group #managerTelId").text();
            	let address="北江三路17号505";
            	param={"tel":tel,"bookTime":bookTime,"manager":manager,"managerTel":managerTel,"address":address};
            	//console.log(param);
            	$.post(url,param,function(data){
            		if(data.state==1){
            			
            			$('#myModal_success').modal();
            			
            		}
            		else{
            			let errorMessage=$("#errorMessage");
            			errorMessage.text("");
            			errorMessage.text(data.message);
            			$('#myModal_error').modal();
            		}
            	})
            }
            
            function myHidden(){
            	$('#myModal_success').modal('hide');
            	$('#myModal').modal('hide');
            }
            //预约添加end
           
        </script>

    </body>
</html>